<template>
    <div class="home">
       <h1>首页</h1>
           <el-button type="primary">Primary</el-button>
           <el-button type="success">Success</el-button>
            <!-- 自动上传 -->
            <!-- action 后面放接口地址 -->
            <!-- name 参数字段 -->
             <!-- <el-upload
                class="avatar-uploader"
                action="http://8.141.145.150:3000/upload/upimgs"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                name="img"
            >
                <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload> -->
            <!-- auto-upload  是否开启自动上传 。默认是true 自动上传 -->
            <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :on-change="uploadImg"
                :auto-upload="false"
                
            >
                <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>


    </div>
</template>
<script setup>
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import api from '../utils/request.js'
let imgUrl = ref('')
// 图片 或者文件 上传成功的构造函数  val就是成功的回调参数 （后端响应的数据）
// const handleAvatarSuccess = (val)=>{
//    console.log(val)
//    imgUrl.value = 'http://8.141.145.150:3000'+val.data.url
// }
// console.log(api.post());

// 封装接口版本
const uploadImg = (val)=>{
    console.log(val.raw) //file类型的值
    // 上传文件 图片都需要forData格式的数据
    let file = new FormData()
    file.append('img',val.raw)
     console.log(file)

    //  调接口
    api.post('/upload/upimgs',file).then(res=>{
        console.log(res.data)
        imgUrl.value = 'http://8.141.145.150:3000'+res.data.data.url
    })
}
</script>
